const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const box = 20; // 每个格子的大小为20x20像素
let snake = []; // 蛇的数组，每个元素包含坐标和颜色
let food = {}; // 食物对象，包含坐标和颜色
let score = 0; // 分数
let d; // 蛇的方向
let gameInterval; // 游戏定时器
let isPaused = false; // 游戏是否暂停的标志

// 设置画布的宽度和高度
canvas.width = 16 * box;
canvas.height = 16 * box;

// 监听键盘事件
document.addEventListener('keydown', direction);

// 方向控制函数
function direction(event) {
    if (event.keyCode === 37 && d !== "RIGHT") {
        d = "LEFT";
    } else if (event.keyCode === 38 && d !== "DOWN") {
        d = "UP";
    } else if (event.keyCode === 39 && d !== "LEFT") {
        d = "RIGHT";
    } else if (event.keyCode === 40 && d !== "UP") {
        d = "DOWN";
    }
}

// 碰撞检测函数
function collision(newHead, array) {
    for (let i = 0; i < array.length; i++) {
        if (newHead.x === array[i].x && newHead.y === array[i].y) {
            return true;
        }
    }
    return false;
}

// 绘制网格线函数
function drawGrid() {
    context.strokeStyle = '#ddd'; // 设置网格线的颜色
    for (let x = 0; x <= canvas.width; x += box) {
        context.beginPath();
        context.moveTo(x, 0);
        context.lineTo(x, canvas.height);
        context.stroke();
    }
    for (let y = 0; y <= canvas.height; y += box) {
        context.beginPath();
        context.moveTo(0, y);
        context.lineTo(canvas.width, y);
        context.stroke();
    }
}

// 绘制蛇和食物函数
function drawSnakeAndFood() {
    // 清除画布（除了网格线）
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawGrid(); // 重新绘制网格线

    // 绘制食物
    context.fillStyle = food.color; // 使用食物的颜色
    context.fillRect(food.x, food.y, box, box);

    // 绘制蛇
    for (let i = 0; i < snake.length; i++) {
        context.fillStyle = snake[i].color; // 使用蛇段的颜色
        context.fillRect(snake[i].x, snake[i].y, box, box);
    }
}

// 更新分数显示函数
function updateScoreDisplay() {
    document.getElementById('score').innerText = '分数: ' + score;
}

// 主游戏循环函数
function draw() {
    // 移动蛇
    let snakeX = snake[0].x;
    let snakeY = snake[0].y;

    if (d === "LEFT") snakeX -= box;
    if (d === "UP") snakeY -= box;
    if (d === "RIGHT") snakeX += box;
    if (d === "DOWN") snakeY += box;

    // 检测蛇是否撞到墙壁或自身
    if (snakeX < 0 || snakeX >= canvas.width || snakeY < 0 || snakeY >= canvas.height || collision({ x: snakeX, y: snakeY }, snake.slice(1))) {
        clearInterval(gameInterval);
        alert('游戏结束\n得分: ' + score);
        clearGame(); // 清除游戏状态
        return;
    }

    // 添加新的头部到蛇的数组
    let newHead = {
        x: snakeX,
        y: snakeY,
        color: food.color // 新头部的颜色与食物的颜色相同
    };

    // 检测蛇是否吃到食物
    if (snakeX === food.x && snakeY === food.y) {
        score++;
        food = {
            x: Math.floor(Math.random() * 15 + 1) * box,
            y: Math.floor(Math.random() * 15 + 1) * box,
            color: '#' + Math.floor(Math.random()*16777215).toString(16) // 随机生成食物颜色
        };
    } else {
        // 如果没有吃到食物，移除蛇尾
        snake.pop();
    }

    // 将新的头部添加到蛇数组的开始
    snake.unshift(newHead);

    // 绘制蛇和食物
    drawSnakeAndFood();

    // 更新分数显示
    updateScoreDisplay();
}

// 初始化游戏状态函数
function initializeGame() {
    // 初始化蛇的位置和颜色
    snake = [{ x: 9 * box, y: 2 * box, color: '#000000' }];

    // 初始化食物的位置和颜色
    food = {
        x: Math.floor(Math.random() * 15 + 1) * box,
        y: Math.floor(Math.random() * 15 + 1) * box,
        color: '#' + Math.floor(Math.random()*16777215).toString(16)
    };

    score = 0; // 重置分数
    d = undefined; // 重置蛇的方向

    // 绘制网格线
    drawGrid();

    // 绘制蛇和食物
    drawSnakeAndFood();

    // 更新分数显示
    updateScoreDisplay();
}

// 清除游戏状态函数
function clearGame() {
    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawGrid(); // 重新绘制网格线

    // 重置蛇的位置和颜色
    snake = [{ x: 9 * box, y: 2 * box, color: '#000000' }];

    // 重置食物的位置和颜色
    food = {
        x: Math.floor(Math.random() * 15 + 1) * box,
        y: Math.floor(Math.random() * 15 + 1) * box,
        color: '#' + Math.floor(Math.random()*16777215).toString(16)
    };

    score = 0; // 重置分数
    d = undefined; // 重置蛇的方向

    // 重新绘制蛇和食物
    drawSnakeAndFood();

    // 更新分数显示
    updateScoreDisplay();

    // 停止游戏循环
    clearInterval(gameInterval);

    // 恢复按钮文本为“暂停游戏”
    document.getElementById('pauseContinueButton').innerText = '暂停游戏';

    // 设置游戏为未暂停状态
    isPaused = false;
}

// 开始游戏按钮点击事件
document.getElementById('startButton').addEventListener('click', function () {
    clearInterval(gameInterval); // 清除现有的定时器
    gameInterval = setInterval(draw, getSelectedSpeed()); // 启动游戏循环

    // 恢复按钮文本为“暂停游戏”
    document.getElementById('pauseContinueButton').innerText = '暂停游戏';

    // 设置游戏为未暂停状态
    isPaused = false;
});

// 暂停/继续游戏按钮点击事件
document.getElementById('pauseContinueButton').addEventListener('click', function () {
    if (isPaused) {
        // 如果游戏已暂停，则继续游戏
        gameInterval = setInterval(draw, getSelectedSpeed());
        document.getElementById('pauseContinueButton').innerText = '暂停游戏';
    } else {
        // 如果游戏正在运行，则暂停游戏
        clearInterval(gameInterval);
        document.getElementById('pauseContinueButton').innerText = '继续游戏';
    }
    isPaused = !isPaused; // 切换暂停标志
});

// 获取选中的速度值
function getSelectedSpeed() {
    return parseInt(document.getElementById('speedSelect').value);
}

// 速度选择框变化事件
document.getElementById('speedSelect').addEventListener('change', function () {
    if (!isPaused) {
        clearInterval(gameInterval); // 清除现有的定时器
        gameInterval = setInterval(draw, getSelectedSpeed()); // 启动新的定时器
    }
});

// 窗口大小变化时调整画布尺寸并重新绘制网格和蛇及食物
window.onresize = function () {
    // 调整画布的宽度和高度
    canvas.width = 16 * box;
    canvas.height = 16 * box;

    // 重新绘制网格线
    drawGrid();

    // 重新绘制蛇和食物
    drawSnakeAndFood();
};

// 初始化游戏状态
initializeGame();
